<template>
  <div>
    <h1>筛选商品</h1>
    分类:
    <el-select
      v-model="query.category"
      class="m-2"
      placeholder="选择分类"
      clearable
    >
      <el-option
        v-for="item in categorys"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>

    搜索条件(输入关键词):
    <el-input class="ser" color="#999" v-model="query.search"></el-input>

    <el-button @click="find"> 点击查询 </el-button>

    <el-table :data="bannerlist1" style="width: 100%,height: 100%">
      <el-table-column prop="proname" label="商品详情" width="200" />
      <el-table-column label="图片" width="160">
        <template #default="scope">
          <img class="img" :src="scope.row.img1" />
        </template>
      </el-table-column>
      <el-table-column prop="category" label="类别" width="100" />
      <el-table-column prop="originprice" label="原价" width="100" />
      <el-table-column prop="sales" label="售价" width="100" />
      <el-table-column prop="discount" label="折扣" width="100" />
      <el-table-column prop="stock" label="库存" width="100" />
    </el-table>
  </div>
</template>
  
  <script setup lang="ts">
import { reactive, ref } from "vue";
import service from "../../../utils/service";

interface ibanner {
  proname: string;
  img: string;
  category: string;
  originprice: string;
  sales: number;
  discount: number;
  stock: number;
}
const query = reactive<{
  category?: string;
  search?: string;
}>({
  category: "",
  search: "",
});
let bannerlist1 = reactive<ibanner[]>([]);
const find = () => {
  service({
    url: "/pro/searchPro",
    method: "post",
    data: `category=${query.category}&search=${query.search}`,
  }).then((res) => {
    if (res.data.code == "200") {
      bannerlist1.length = 0;
      bannerlist1.push(...res.data.data);
    }
  });
};

find();
const value = ref("");
const categorys = reactive<string[]>([]);
const getcategorys = () => {
  service({
    url: "/pro/getCategory",
  }).then((res) => {
    if (res.data.code == 200) {
      categorys.length = 0;
      categorys.push(...res.data.data);
    }
  });
};
getcategorys();
</script>
  
  <style scoped>
.ser {
  width: 100px;
}
.img {
  width: 100px;
  height: 100px;
}
</style>